<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>本页面演示js的变量和基础数据类型</title>
</head>

<body>
    <div>
		<!--id的命名规范一般使用小驼峰命名法。首单词小写之后的单词首字母大写-->
        姓名:<input type="text" id="txtUserName" />  <input type="button" value="点我" onclick="showName()" />
    </div>
    <script type="text/javascript">
		function showName(){
		    // 声明变量userName,把id为txtUserName的标签元素的value赋值给userName
			var userName = document.getElementById("txtUserName").value;
			// if 是如果的意思,如果userName这个变量的值等于空字符串.则执行if的大括号内的js代码
			// trim()会把字符串两侧的空格截取掉.用户若输入空格便不会通过验证
			if(userName.trim() == ""){
				alert("请输入您的姓名");
				// 返回.中断function的执行
				return;
			}
			// 判断用户名的长度是否大于10或者小于2
			if(userName.length > 10 || userName.length < 2){
				alert("您的姓名不符合我们的规定");
				return;
			}else{
				alert("您合格了。下面会弹出您的名字");
			}
			alert(userName);
		}
        var a = 1;
        a = 2;
        a = 3 + 3;
        a = "我是谁？我在哪？"
        console.log("变量的值为：" + a);
        // 常量声明之后不可改变。否则会抛出异常   
        const b = 3;
        // const b = 4;
        console.log("常量为:" + b);
		
		console.log(true);
		console.log(true + 1);
		console.log(false + 1);
		console.log("=============开始演示++ --")
		var num1 = 1;
		
		// ++或--放在变量后.则表达式会先使用计算前的值.再去计算表达式
		console.log(num1++);
		console.log(num1--);
		// ++或--放在变量前.则表达式会先使用计算后的值
		console.log(++num1);
		console.log(--num1);
		
		var a = 10;
		console.log("====开始演示+=, -=, *=, /= ");
		// 相当于a = a + 3
		a += 3;
		console.log("演示+=:" + a);
		var a2 = 10;
		// 相当于 a2 = a2 - 3
		a2 -= 3;
		console.log("演示-=:" + a2);
		
		var a3 = 10;
		// 相当于a3 = a3 * 3
		a3 *= 3;
		console.log("演示*=" + a3);
		
		var a4 = 10;
		// 相当于 a4 = a4 / 3
		a4 /= 3;
		console.log("演示/=" + a4)
		
		c
		
		// null不与其他任何值相等.用来表示空值
		var null_val = null;
		// undefined与其他任何值不相等.用来表示未定义.
		// 一般当某个赋值语句没有正产工作的时候变量便成了undefined
		var uf_val = undefined;
		
		// 任何基础类型的值与字符串相加都会被隐式转换为字符串进行合并
		console.log('asdfasdfasdafdfs' + undefined + true + false + null);
		// 字符串+数组 
		console.log('字符串+列表' + ['a', 'b', 1]);
		// 字符串+对象
		console.log('字符串+对象' + {"name": '兵长', 'height': "160cm"});
    </script>
</body>

</html>